@extends('site.center.layouts.center_master')
@push('center_css')
    <link href="{{asset('/org/site')}}/css/colstyle.css" rel="stylesheet" type="text/css">
@endpush
@section('content')
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-collection">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">我的收藏</strong> /
                        <small>My&nbsp;Collection</small>
                    </div>
                </div>
                <hr/>

                <div class="you-like">
                    <div class="s-bar">
                        我的收藏
                        <a class="am-badge am-badge-danger am-round" style="display: none">降价</a>
                        <a class="am-badge am-badge-danger am-round" style="display: none">下架</a>
                    </div>
                    <div class="s-content">
                        @foreach($vars as $var)
                            <div class="s-item-wrap">
                                <div class="s-item">
                                    <div class="s-pic">
                                        <a href="{{route('site.detail',$var['id'])}}" class="s-pic-link">
                                            <img src="{{$var['pics'][0]}}" alt="图片丢了" title="{{$var['title']}}" class="s-pic-img s-guess-item-img"
                                             height="186px">
                                        </a>
                                    </div>
                                    <div class="s-info">
                                        <div class="s-title">
                                            <a href="{{route('site.detail',$var['id'])}}" title="{{$var['title']}}">
                                                {{$var['description']}}
                                            </a>
                                        </div>
                                        <div class="s-price-box">
                                        <span class="s-price" style="text-align: center">
                                            <em class="s-price-sign">¥</em>
                                            <em class="s-value">{{$var['price']}}</em>
                                        </span>
                                            <span class="s-history-price " style="display: none">
                                            <em class="s-price-sign">¥</em>
                                            <em class="s-value">68.00</em>
                                        </span>
                                        </div>
                                        <div class="s-extra-box">
                                            <span class="s-comment">好评: 98.03%</span>
                                            <span class="s-sales">月销: 219</span>
                                        </div>
                                    </div>
                                    <div goods_id="{{$var['id']}}" class="s-tp">
                                        <span class="ui-btn-loading-before" style="width: 100%">
                                            取消收藏
                                        </span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        {{--给取消收藏加一个点击事件--}}
                            <script>
                                $(".s-tp").click(function () {
                                    if (confirm("确定要取消收藏这么好的宝贝吗?")){
                                        let id = $(this).attr('goods_id');
                                        //然后发送异步请求,由于我想用户添加收藏和取消收藏都走一个方法,不再增加路由这个时候就需要传递一个额外的参数以作区分
                                        $.get("/collect/Goods/"+id,{flag:"delete"},function (result) {
                                            if (result.status){
                                                //删除收藏不需要提醒,只需要刷新下页面,之前收藏的商品不见就可以了
                                                // reload() 方法类似于你浏览器上的刷新页面按钮
                                                location.reload();
                                            }
                                        },'json')
                                    }
                                })
                            </script>
                    </div>
                    @if(1 == 2)
                        <div class="s-more-btn i-load-more-item" data-screen="0"><i
                                class="am-icon-refresh am-icon-fw"></i>更多
                        </div>
                    @endif
                </div>

            </div>

        </div>
        <!--底部使用公共的底部-->
        @include('site.layouts._bottom')
    </div>
@endsection
